<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8"/>
    <title>二维码生成</title>
</head>

<body >

<div class="page" id="app">
    <el-input
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 4}"
            placeholder="请输入二维码内容[http(s)链接或者文字]"
            v-model="content">
    </el-input>
    <el-row>
        <el-button type="success" @click="createImageQRCodeForWeb">确定生成</el-button>
    </el-row>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.7.0-alpha.4/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<script>
    let vue = new Vue({
        el:"#app",
        data:{
            content: ''
        },
        methods:{
            createImageQRCodeForWeb() {
                if (this.content == '') {
                    alert("请先输入内容")
                    return
                }
                let formData = new FormData(); //FormData对象，添加参数只能通过append('key', value)的形式添加
                formData.append("content", this.content);
                axios.post('/zing/image/createImageQRCodeForWeb',formData,{
                    headers: {
                        "Content-Type": "multipart/form-data",//配置header，我们上传的文件编码格式就是multipart/form-data
                    },
                    responseType: "blob"
                }).then((res)=>{
                    console.log(res)
                    var fileName = new Date().getTime() + ".png"
                    this.download(res.data,fileName)
                })
            },

            download (data,filename) {
                var ele = document.createElement('a');// 创建下载链接
                ele.download = filename;//设置下载的名称
                ele.style.display = 'none';// 隐藏的可下载链接
                // 字符内容转变成blob地址
                var blob = new Blob([data]);
                console.log(blob)
                ele.href = URL.createObjectURL(blob);
                // 绑定点击时间
                document.body.appendChild(ele);
                ele.click();
                // 然后移除
                document.body.removeChild(ele);
            }
        }
    });

</script>

</body>
<style>
    .page{
        text-align: center;
    }

</style>
</html>